<template>
    <div class="invite">
        <nav-list :clickIndex="clickIndex"></nav-list>
        <div class="middle-invite">
            <div class="date-picker" style="padding-right: 30px">
                <el-date-picker
                    v-model="pickerTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changePicker"
                    :picker-options="pickerOptions2"
                    size="small"
                >
                </el-date-picker>
            </div>
            <!-- <avue-crud
          :data="tableData"
          :option="tableOption"
          :table-loading="tableLoading"
          :header-cell-class-name="headerCell"
          :row-class-name="rowCell"
          @on-load="getPage"
          ref="crud">
        <template slot-scope="scope" slot="zhuye_add">
          <div style="cursor: pointer;" @click="getZhuyeDetail(1)">{{scope.row.zhuye_add}}</div>
        </template>
        <template slot-scope="scope" slot="zhuye_reduce">
          <div style="cursor: pointer;" @click="getZhuyeDetail(2)">{{scope.row.zhuye_reduce}}</div>
        </template>
      </avue-crud> -->
            <div
                id="lineVip"
                v-loading="tableLoading"
                element-loading-text="加载中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.1)"
                style="
                    width: 96vw;
                    height: 80vh;
                    display: inline-block;
                    margin: 0 auto;
                "
            ></div>
        </div>
        <el-dialog width="80%" :visible.sync="dialogTableVisible">
            <avue-crud
                :page.sync="page2"
                :data="tableData2"
                :option="tableOption2"
                :table-loading="tableLoading2"
                :header-cell-class-name="headerCell"
                :row-class-name="rowCell"
                @on-load="getPage2"
                ref="crud"
            >
            </avue-crud>
        </el-dialog>
    </div>
</template>

<script>
import { tableOption, tableOption2 } from "@/const/bamboo/bambooIndex";
import {
    getBamNum,
    getBamDetail,
    getzhuye_data,
} from "@/api/bamboo/bambooIndex";
import "echarts/extension/bmap/bmap";
import navList from "@/components/navList/navList.vue";

export default {
    name: "bambooIndex",
    components: {
        navList
    },
    data() {
        return {
            // 日期时间范围不在同一天
            pickerOptions2: {
                onPick: ({ maxDate, minDate }) => {
                    if (minDate && !maxDate) {
                        this.timeOptionRange = minDate;
                    }
                    if (maxDate) {
                        this.timeOptionRange = null;
                    }
                },
                disabledDate: (time) => {
                    let timeOptionRange = this.timeOptionRange;
                    if (
                        timeOptionRange &&
                        time.getTime() === timeOptionRange.getTime()
                    )
                        return true;
                },
            },
            navList: [
                {
                    name: "首页",
                    type: 1,
                    img: "../../../public/static/images/nav_1.png",
                },
                {
                    name: "活跃分析",
                    type: 4,
                    img: "../../../public/static/images/nav_3.png",
                },
                {
                    name: "行为分析",
                    type: 5,
                    img: "../../../public/static/images/nav_3.png",
                },
                {
                    name: "小竹叶分析",
                    type: 3,
                    img: "../../../public/static/images/nav_3.png",
                },
                {
                    name: "邀请排行榜",
                    type: 2,
                    img: "../../../public/static/images/nav_3.png",
                },

                // {
                //   name: '首页2',
                //   type: 3,
                //   img: '../../../public/static/images/nav_3.png'
                // }
            ],
            clickIndex: 3,
            tableData: [],
            tableOption: tableOption,
            tableLoading: true,
            pickerTime: "",
            dialogTableVisible: false,
            tableOption2: tableOption2,
            page2: {
                currentPage: 1,
                pageSize: 10,
                total: 100,
            },
            tableData2: [],
            tableLoading2: true,
            bamStatus: "",

            lineOpiton: {
                title: {
                    text: "",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["发放", "回收"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                series: [
                    {
                        name: "发放",
                        type: "line",
                        stack: "ff",
                        data: [],
                    },
                    {
                        name: "回收",
                        type: "line",
                        stack: "hs",
                        data: [],
                    },
                ],
            },
        };
    },
    created() {
        let startDate = this.$moment().add(-30, "days").format("YYYY-MM-DD");
        let endDate = this.$moment().add(0, "days").format("YYYY-MM-DD");
        this.pickerTime = [startDate, endDate];
    },
    mounted() {
        this.getPage();
    },
    methods: {
        //获取邀请页面数据
        getPage(page, params) {
            console.log(this.pickerTime);
            this.tableLoading = true;
            let obj = {
                start_date: this.pickerTime[0],
                end_date: this.pickerTime[1],
            };
            console.log(obj);
            getzhuye_data(obj).then((res) => {
                let xData = [];
                let pcData = [];
                let zhuye_reduce = [];
                res.data.data.forEach((val) => {
                    xData.push(val.date);
                    pcData.push(val.zhuye_add);
                    zhuye_reduce.push(val.zhuye_reduce);
                });
                this.lineOpiton.xAxis.data = xData;
                this.lineOpiton.series[0].data = pcData;
                this.lineOpiton.series[1].data = zhuye_reduce;
                this.$echarts
                    .init(document.getElementById("lineVip"))
                    .setOption(this.lineOpiton);
                // this.tableData = [res.data.data];
                this.tableLoading = false;
            });
        },

        changePicker(e) {
            let startDate = this.$moment(e[0]).format("YYYY-MM-DD");
            let endDate = this.$moment(e[1]).format("YYYY-MM-DD");
            this.pickerTime = [startDate, endDate];
            this.getPage();
        },

        //表头样式
        headerCell({ row, column, rowIndex, columnIndex }) {
            return "header-cell";
        },

        rowCell({ row, column, rowIndex, columnIndex }) {
            if (rowIndex % 2 == 0) {
                return "row-cell";
            } else {
                return "row-cells";
            }
        },

        navClick(item) {
            this.clickIndex = item.type;
            if (item.type == 1) {
                this.$router.push("/homeIndex");
            } else if (item.type == 2) {
                this.$router.push("/inviteIndex");
            } else if (item.type == 3) {
                this.$router.push("/bambooIndex");
            } else if (item.type == 4) {
                this.$router.push("/activeAnalysis");
            } else if (item.type == 5) {
                this.$router.push("/behaviorAnalysis");
            }
        },
        getZhuyeDetail(val) {
            this.bamStatus = val;
            this.dialogTableVisible = true;
            this.page2.pageSize = 10;
            this.page2.currentPage = 1;
            this.page2.total = 0;
            this.getPage2(this.page2, {});
        },
        getPage2(page, params) {
            let obj = {
                status: this.bamStatus,
                page: page.currentPage,
                pagesize: page.pageSize,
                start_date: this.pickerTime[0],
                end_date: this.pickerTime[1],
            };
            getBamDetail(obj).then((res) => {
                this.tableData2 = res.data.data;
                this.page2.total = res.data.data[0].all_count;
                this.tableLoading2 = false;
            });
        },
    },
};
</script>

<style lang="scss">
@import "@/styles/home.scss";
@import "@/styles/common.scss";

.header-cell {
    color: #61d2f7 !important;
    font-size: 14px;
    font-weight: 600;
    height: 48px;
    background-color: #072951 !important;
    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}

.row-cell {
    color: #fff !important;
    background-color: #072951 !important;
}
.row-cells {
    color: #fff !important;
    background-color: #072951 !important;
    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}
.el-card {
    background-color: #072951 !important;
}
.el-pagination__total {
    color: #fff !important;
}
.el-pagination__jump {
    color: #fff !important;
}
.hover-row {
    background-color: #072951 !important;
}

.el-table__body .el-table__row.hover-row td {
    background-color: #072951 !important;
}

.el-table tbody tr:hover td {
    background-color: #072951 !important;
}
.el-dialog__header {
    background-color: #081832 !important;
    color: #fff !important;
}
.el-dialog__body {
    background-color: #081832 !important;
}
.el-range-editor--small.el-input__inner {
    background-color: #072951 !important;
}
.el-range-separator {
    color: #fff !important;
}
</style>